<script setup>
import { computed } from 'vue'
import { transPhone } from '@/utils/helper'

const props = defineProps({
  item:{
    type: Object,
  }
})

/*const item = ref({
  years: 4,
  store: 155,
  address: '洛阳',
  facility: '相机',
  name: '吃喝玩乐精选',
  good: '口播，巧妙带入广告',
  tags: [
    { name: '设备自带' },
    { name: '休闲娱乐'}
  ]
})
const tags_style = [
  { color: '#2B5EFF', bgColor: '#ECF1FF', borderColor: '#7495FF', name: '蓝' },
  { color: '#FF6C2B', bgColor: '#FFF9EC', borderColor: '#FFD674', name: '橙' },
  { color: '#8C4CFE', bgColor: '#ECF1FF', borderColor: '#B186FF', name: '紫' },
  { color: '#FF2B2B', bgColor: '#FFF0EC', borderColor: '#FF9574', name: '红' }
]*/
const good_at = computed(() => { // 擅长领域
  const arr = JSON.parse(props.item.good_at)
  return arr.join('、')
});
</script>

<template>
  <view class="camer-man-a2">
    <view class="c-m-info-box-a2">
      <view class="avatar-a2">
          <image :src="decodeURIComponent(item.mini_avatar)" :lazyLoad="true"/>
      </view>
      <view class="c-m-info-a2">
        <!-- <view class="name">{{ item.mini_nickname }}</view> -->
        <view class="name">{{ transPhone(item.phone) }}</view>

        <!-- <view class="tags-box-a1" v-if="item.tags">
          <view v-for="(tag,key) in JSON.parse(item.tags)" :key="key" class="tag-a1">
            <view :style="{color: tags_style[key].color}" class="tag-item-a1">
              <view class="tb-left-a1" :style="{'border-right-color': tags_style[key].borderColor}">
                <view class="tb-left-n-a1" :style="{'border-right-color': tags_style[key].bgColor}"></view>
              </view>
              <view class="tb-center-a1" :style="{background: tags_style[key].bgColor,borderTop: `1px solid ${tags_style[key].borderColor}`,borderBottom: `1px solid ${tags_style[key].borderColor}`}">
                · {{tag}} ·
              </view>
              <view class="tb-right-a1" :style="{'border-left-color': tags_style[key].borderColor}">
                <view class="tb-right-n-a1" :style="{'border-left-color': tags_style[key].bgColor}"></view>
              </view>
            </view>
          </view>
        </view> -->

        <view class="good"><text>擅长类型：</text>{{good_at}}</view>
      </view>
    </view>
    <view class="camer-man-data-a2">
      <view class="camer-man-data-item-a2">
        <text class="color-red">{{item.working_hours}}年</text>
        <text>拍摄年限</text>
      </view>
      <!-- <view class="camer-man-data-item-a2">
        <text class="color-red">{{item.store}}</text>
        <text>拍摄商家</text>
      </view>
      <view class="camer-man-data-item-a2">
        <text class="color-red">{{item.address}}</text>
        <text>接单范围</text>
      </view> -->
      <view class="camer-man-data-item-a2">
        <text class="color-red">{{item.equipment}}</text>
        <text>主力设备</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.camer-man-a2{
  width: 100%;
  // min-height: 139px;
  background: #ffffff;
  border-radius: 10px;
  padding: 9px;
  box-sizing: border-box;
  margin-bottom: 7px;
  .c-m-info-box-a2{
    width: 100%;
    // min-height: 80px;
    display: flex;
    border-bottom: 0.5px solid #eaeaea;
    padding-bottom: 10px;
    box-sizing: border-box;
    .avatar-a2{
      width: 50px;
      height: 50px;
      background: #ffffff;
      flex-shrink: 0;
      margin-right: 9px;
      image{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 0.5px solid #b5b5b5;
      }
    }
    .c-m-info-a2{
      display: flex;
      flex-direction: column;
      .name{
        font-size: 14px;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: 700;
        color: #333333;
      }
      .good{
        font-size: 12px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        color: #666666;
        line-height: 14.5px;
        margin-top: 6px;
      }
    }
    .tags-box-a1{
      display: flex;
      flex-wrap: wrap;
    .tag-a1{
      font-size: 11px;
      margin: 10px 10px 9px 10px;
      // position: relative;
      .tag-item-a1{
        display: flex;
        align-items: center;
        position: relative;
        .tb-center-a1{
          flex-shrink: 0;
        }
        .tb-left-a1{
          width: 0;
          height: 0;
          border: 9px solid #000;
          border-top-color: transparent;
          border-bottom-color: transparent;
          border-left-color: transparent;
          border-right-color: red;
          position: absolute;
          left: -17.5px;
          .tb-left-n-a1{
            width: 0;
            height: 0;
            border: 8px solid #000;
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
            border-right-color: #ECF1FF;
            position: absolute;
            left: -6.5px;
            top: -8px;
          }
        }
        .tb-right-a1{
          width: 0;
          height: 0;
          border: 9px solid #000;
          border-top-color: transparent;
          border-bottom-color: transparent;
          border-left-color: red;
          border-right-color: transparent;
          position: absolute;
          right: -17.5px;
          .tb-right-n-a1{
            width: 0;
            height: 0;
            border: 8px solid #000;
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-left-color: #ECF1FF;
            border-right-color: transparent;
            position: absolute;
            right: -6.5px;
            top: -8px;
          }
        }
      }
    }
  }
  }
  .camer-man-data-a2{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-top: 10px;
    .camer-man-data-item-a2{
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 12px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: center;
      color: #666666;
      line-height: 19.5px;
      .color-red{
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        color: #f30703;
      }
    }
  }
}
</style>